{% load staticfiles %}
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap-theme.min.css' %}">
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'datetimepicker/jquery.datetimepicker.css' %}">
    {% block css %}{% endblock %}
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'datetimepicker/build/jquery.datetimepicker.full.min.js' %}"></script>
    {% block javascript %}{% endblock %}
    <title>成都富晟座椅-合理化建议统计系统</title>
    {% block style %}{% endblock %}
    <style>
        * {
            margin: 0;
            padding: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .navbar {
            width: 100%;
            height: 40px;
            min-height: 40px;
            z-index: 999;
            background: #c8c8c8;
        }

        .navbar-left {
            float: left;
            height: 40px;
        }

        .navbar-right {
            float: right;
            height: 40px;
        }

        .menu-item {
            display: inline-block;
            list-style: none;
            position: relative;
            width: 140px;
            height: 40px;
            line-height: 40px;
            background: #606266;
            color: #fff;
        }

        .menu-item a {
            display: block;
            text-decoration: none;
            text-align: center;
            width: 140px;
            height: 40px;
            line-height: 40px;
            background: #606266;
            color: #fff;
        }

        .menu-item a:hover {
            text-decoration: none;
            color: #fff;
            background: #303133;
        }

        .submenu {
            list-style: none;
            display: none;
            position: absolute;
            width: 140px;
            height: 40px;
            line-height: 40px;
            background: #606266;
            color: #fff;
        }

        .submenu a {
            width: 140px;
            height: 40px;
            line-height: 40px;
            background: #606266;
            color: #fff;
        }
    </style>
</head>
<body>
{% block navbar %}
    <div class="navbar">
        <div class="navbar-left">
            <ul class="menu">
                <li class="menu-item"><a href="">首页</a></li>
                <li class="menu-item"><a href="">建议审批</a>
                    <ul class="submenu">
                        <li class="submenu-item"><a href="/suggest">建议申请</a></li>
                        <li class="submenu-item"><a href="/suggest_list">我的申请</a></li>
                        <li class="submenu-item"><a href="/suggest_audit_list">待审批</a></li>
                        <li class="submenu-item"><a href="/suggest_audited_list/">已审批</a></li>
                    </ul>
                </li>
                <li class="menu-item"><a href="">项目立项</a>
                    <ul class="submenu">
                        <li class="submenu-item"><a href="/project/">项目立项</a></li>
                        <li class="submenu-item"><a href="/project_follow/">项目跟进</a></li>
                        <li class="submenu-item"><a href="/project_list/">项目列表</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="navbar-right">
            <ul class="menu">
                {% if request.user.is_authenticated %}
                    <li class="menu-item"><a href="">{{ request.user.username }}</a>
                        <ul class="submenu">
                            <li class="submenu-item"><a href="/update_userinfo">修改个人信息</a></li>
                            <li class="submenu-item"><a href="/reset_password">重置密码</a></li>
                            <li class="submenu-item"><a href="/update_password">修改密码</a></li>
                        </ul>
                    </li>
                    <li class="menu-item"><a href="/accounts/logout/">注销</a></li>
                {% else %}
                    <li class="menu-item"><a href="/accounts/login/">登陆</a></li>
                {% endif %}
                {% if request.user.is_superuser %}
                    <li class="menu-item"><a href="">系统管理</a>
                        <ul class="submenu">
                            <li class="submenu-item"><a href="/xadmin">后台管理(xadmin)</a></li>
                            <li class="submenu-item"><a href="/admin">后台管理(admin)</a></li>
                            <li class="submenu-item"><a href="/import_user">用户批量导入</a></li>
                            <li class="submenu-item"><a href="/about">关于我们</a></li>
                        </ul>
                    </li>
                {% endif %}

            </ul>
        </div>
    </div>
{% endblock %}
{% block section %}
{% endblock %}
{% block script %}
{% endblock %}
<script>
    $(function () {
        $('.menu-item').hover(function () {
            console.log('show')
            $(this).find('.submenu').fadeIn();
        })
        $('.menu-item').mouseleave(function () {
            $(this).find('.submenu').fadeOut();
            console.log('hide')
        })
    })
</script>

</body>
</html>